<template>
  <div class="container">
    <!-- 报关分票信息 -->
    <div class="middle-box">
      <span class="label"> 报关提单号 </span>
    </div>
    <div class="customs-box">
      <div>
        <span class="customs-declaration"> 报关提单号： </span>
        <span class="customs-declaration">{{
          detailData.blno ? detailData.blno : '--'
        }}</span>
        <el-button
          @click="divideVotes"
          type="primary"
          style="margin-left: 12px"
          v-if="
            (!ticketListBlno || ticketListBlno == detailData.blno) && showBtn
          "
          >分票</el-button
        >
        <el-button
          type="primary"
          style="margin-left: 12px"
          @click="mergerVotes"
          v-if="
            !(!ticketListBlno || ticketListBlno == detailData.blno) && showBtn
          "
          >并票</el-button
        >
      </div>
      <div class="customs-content">
        报关提单分号：{{ ticketListBlno ? ticketListBlno : '--' }}
      </div>
    </div>

    <div class="middle-box" style="margin-top: 18px">
      <span class="label"> 集装箱货物 </span>
      <span class="fold" v-if="showBtn" @click="foldService">{{
        serviceInfoIsShow ? '收起' : '展开'
      }}</span>
    </div>
    <div v-if="serviceInfoIsShow">
      <docDetailBoxPackingTable
        :showBtn="showBtn"
        class="table-box"
        v-model:detailData="data"
        :detailDataCopy="detailDataCopy"
        @setBoxNumber="setBoxNumber"
        ref="docDetailBoxPackingTableRef"
      >
      </docDetailBoxPackingTable>
    </div>

    <!-- 货物装载列表 -->
    <div class="middle-box">
      <span class="label"> 集装箱装载明细 </span>
      <span class="fold" v-if="showBtn" @click="foldBoxCargoLoading">{{
        boxCargoLoadingInfoIsShow ? '收起' : '展开'
      }}</span>
    </div>
    <div v-show="boxCargoLoadingInfoIsShow">
      <docDetailBoxCargoLoadingTable
        class="table-box"
        :showBtn="showBtn"
        v-model:detailData="data"
        ref="docDetailBoxCargoLoadingTableRef"
      >
      </docDetailBoxCargoLoadingTable>
    </div>

    <!-- 全货物列表 -->
    <div class="middle-box">
      <span class="label"> 全部装箱货物数据 </span>
      <span class="fold" v-if="showBtn" @click="foldBoxAllGoods">{{
        boxAllGoodsInfoIsShow ? '收起' : '展开'
      }}</span>
    </div>
    <div v-show="boxAllGoodsInfoIsShow">
      <docDetailBoxAllGoodsTable
        class="table-box"
        :showBtn="showBtn"
        ref="docDetailBoxAllGoodsTableRef"
        v-model:detailData="data"
      >
      </docDetailBoxAllGoodsTable>
      <!-- <docDetailBoxAllGoodsTableQuery
        v-else
        class="table-box"
        ref="docDetailBoxAllGoodsTableRef"
        :detailData="data"
      >
      </docDetailBoxAllGoodsTableQuery> -->
    </div>

    <docDetailDivideVotes
      ref="docDetailDivideVotesRef"
      @getTicket="getTicketData"
    ></docDetailDivideVotes>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import selectDown from './../components/selectDown.vue'
// import docDetailBoxTableCopy from "./docDetailBoxTableCopy.vue";
import docDetailBoxPackingTable from './docDetailBoxPackingTable.vue'
import docDetailBoxPackingTableQueey from './docDetailBoxPackingTableQueey.vue'
import docDetailBoxCargoLoadingTable from './docDetailBoxCargoLoadingTable.vue'
import docDetailBoxCargoLoadingTableQuery from './docDetailBoxCargoLoadingTableQuery.vue'
import docDetailBoxAllGoodsTable from './docDetailBoxAllGoodsTable.vue'
import docDetailBoxAllGoodsTableQuery from './docDetailBoxAllGoodsTableQuery.vue'
import docDetailDivideVotes from './docDetailDivideVotes.vue'
import { ElMessage, ElMessageBox } from 'element-plus'

export default defineComponent({
  components: {
    // docDetailBoxTable,
    docDetailBoxPackingTable,
    docDetailBoxPackingTableQueey,
    docDetailBoxCargoLoadingTable,
    docDetailBoxCargoLoadingTableQuery,
    docDetailBoxAllGoodsTable,
    docDetailDivideVotes,
    docDetailBoxAllGoodsTableQuery,
    selectDown
  },
  props: {
    //详细数据
    detailData: {
      type: Object,
      default: () => {}
    },
    //详细数据副本
    detailDataCopy: {
      type: Object,
      default: () => {}
    },
    // 控制显示查看信息页面或者编辑页面
    showBtn: {
      type: Boolean,
      default: true
    }
  },
  emits: ['update:detailData'],
  computed: {
    data: {
      get() {
        return this.detailData
      },
      set(value) {
        this.$emit('update:detailData', value)
      }
    }
  },
  data() {
    return {
      // 拆分票数据
      ticketList: '',
      ticketListBlno: '',
      rowBoxs: {
        rowIndex: 0
      },
      // 集装箱货物展开
      serviceInfoIsShow: true,
      // 货物装载列表展开
      boxCargoLoadingInfoIsShow: true,
      // 全货物列表
      boxAllGoodsInfoIsShow: true
    }
  },
  methods: {
    // refreshStep() {
    //   this.$refs.docDetailBoxCargoLoadingTableRef.getTableData()
    //   this.$emit('refreshStep')
    // },
    // 获取所有的列表数据
    getAllTableData() {
      // 全部货物
      this.$refs.docDetailBoxAllGoodsTableRef.getCargoTableList()
      this.getTicketData()
    },
    // 获取拆票数据
    async getTicketData() {
      let res = await this.$http.get('/api/sebooking/getsplitorders', {
        id: this.$route.query.id
      })
      let blno = res.data.map((item) => {
        return item.blno
      })
      this.ticketListBlno = blno.length ? blno.join() : ''
      this.ticketList = res.data
    },
    // 并票
    mergerVotes() {
      // if (this.ticketListBlno) {
      //   this.$message.warning('当前数据未拆票')
      //   return
      // }
      this.$confirm('并票后，集装箱装载明细内容是否需要进行合并', '并票', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await this.$http.post('/api/sebooking/combinebooking', {
          id: this.$route.query.id
        })
        if (res.status) {
          this.getTicketData()
          this.$message.success('成功')
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    divideVotes() {
      if (!this.data.blno) {
        this.$message.warning('无提单号，无法拆票')
        return
      }
      this.$refs.docDetailDivideVotesRef.open(this.data.blno)
    },
    setBoxNumber(row) {
      this.rowBoxs = row
      this.$refs.docDetailBoxCargoLoadingTableRef.setBox(row)
    },
    // 集装箱展开收起
    foldService() {
      this.serviceInfoIsShow = !this.serviceInfoIsShow
    },
    foldBoxCargoLoading() {
      this.boxCargoLoadingInfoIsShow = !this.boxCargoLoadingInfoIsShow
    },
    foldBoxAllGoods() {
      this.boxAllGoodsInfoIsShow = !this.boxAllGoodsInfoIsShow
    }
  },
  watch: {
    showBtn: {
      handler(newVal, oldVal) {
        this.$nextTick(() => {
          this.$refs.docDetailBoxAllGoodsTableRef.getCargoTableList()
        })
      },
      deep: false, // 深度侦听(对象里面层的值改变)
      immediate: false // 立即侦听(网页打开handler执行一次)
    }
  },
  created() {
    // console.log('this.data',this.data);
  }
})
</script>

<style lang="scss" scoped>
@import '@/styles/business/business.scss';
.container {
  :deep(.el-form-item) {
    margin: 0;

    .el-form-item__label {
      font-size: 12px;
    }
  }
  .customs-box {
    display: block;
    padding-left: 12px;

    .customs-declaration {
      color: #000000d8;
      font-family: PingFang SC;
      font-weight: normal;
      font-size: 12px;
      line-height: 20px;
      letter-spacing: 0px;
    }
    .customs-content {
      color: #00000099;
      font-family: PingFang SC;
      font-weight: normal;
      font-size: 12px;
      line-height: 20px;
      letter-spacing: 0px;
    }

    :deep(.el-button--small) {
      border-radius: 2px;
      background: #f1f8ff;
      color: #3b78ff;
      font-family: PingFang SC;
      font-weight: normal;
      font-size: 12px;
      line-height: 20px;
      letter-spacing: 0px;
      border: 1px solid #f1f8ff;
    }
  }

  .customs-box > div:first-child {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 13px;
  }

  :deep(.el-row) {
    margin-bottom: 8px;
    // padding-right: 16px;
  }

  .info {
    padding: 0 16px 8px;
    span {
      margin-right: 32px;
      color: #00000099;
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 12px;
      line-height: 20px;
      letter-spacing: 0px;
      text-align: left;
    }
    .info-bold {
      color: #000000d8;
    }
  }

  .boxSize {
    padding: 0 20px;
    display: flex;
    margin-bottom: 16px;

    .boxSize-box {
      width: 14%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 32px;

      :deep(.el-input-number) {
        .el-input-number__decrease {
          display: none;
        }

        .el-input-number__increase {
          display: none;
        }

        .el-input__inner {
          padding: 0;
        }
      }

      .box-input {
        flex: 1;
      }

      .middle-icon {
        margin: 0 8px;
      }

      .box-select {
        flex: 1;
      }
    }
  }

  .table-box {
    padding: 0 12px 10px;
  }
}

.check-box-container {
  :deep(.el-checkbox) {
    margin-left: 12px;
    margin-right: 0px;
  }
}

:deep(.el-table .cell) {
  color: #000000d8;
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0px;
}
</style>
